<template>
    <view>
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		
		<uni-popup ref="video_popup" @change="popupChange" :mask-click="false" background-color="#000" style="z-index: 999;">
			<view v-if="tempVideoUrl" class="mask">
				<image @tap.stop="closePlay()" class="mask_close_btn" src="/static/icon/close.png" mode="widthFix"></image>
						
				<view  @tap.stop>
					<video class="mask_video" autoplay :src="tempVideoUrl"></video>
				</view>
			</view>	
		</uni-popup>
		
		
    </view>
</template>

<script>
export default {
    data() {
        return {
			show: false,
            urlList: [],
			// 预览视频地址
			tempVideoUrl: '',
        }
    },
    methods: {
		initPlay(arr,index = 0){
			if(arr){
				this.urlList = Array.isArray(arr)?arr:[arr]
				this.tempVideoUrl = this.urlList[index]
				this.openPopup()
			}
		},
		openPopup() {
			this.$refs.video_popup.open('top')
		},
		closePopup() {
			this.$refs.video_popup.close()
		},
		popupChange(e) {
			this.show = e.show
		},
		// 关闭播放
		closePlay(){
			this.closePopup()
			this.urlList = []
			this.tempVideoUrl = ''
		},
    }
}
</script>

<style lang="scss" scoped>
	
.mask {
	background-color: #000;
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.mask_video{
	width: 100%;
	height: 78vh;
}
.mask_close_btn {
	width: 30px;
	height: 30px;
	margin: 8px 10px;
}
</style>